<template>
     <div class="head">
        <van-nav-bar   title="我的订单"  left-arrow @click-left="$router.back()"> 
                <template #right>
                    <van-icon name="ellipsis" size="20" />
                </template>
        </van-nav-bar>
    </div>  
    <!-- tabs组件 -->
    <van-tabs v-model:active="active">
        <van-tab v-for="item in tabs" :title="item.text"></van-tab>
    </van-tabs>
    <!-- list组件 -->
    <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    >
    <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
</template>
<script setup>
import { reactive,ref,onMounted } from 'vue';
import {getOrderList} from "../../api/index.js"
const loading=ref(false)
const finished=ref(false)
const list =ref([])
let pageNumber=ref(1) //表示第几页
let status =ref('')  //表示处于什么状态
let tabs = reactive([
    {
        text: "全部",
        status: "",
    },
    {
        text: "待付款",
        status: "0",
    },
    {
        text: "待确认",
        status: "1",
    },

    {
        text: "待发货",
        status: "2",
    },
    {
        text: "已发货",
        status: "3",
    },
    {
        text: "交易完成",
        status: "4",
    },
]);

onMounted(()=>{
   
})

const onLoad = () => {
    getOrderList(pageNumber.value++,status.value).then(res=>{
        console.log(res);
        if(res.resultCode==200){
            if(res.data.list.length==0){
                finished.value=true
            }
            list.value= list.value.concat(res.data.list)
                loading.value=false
        }
        
    })
  
    };
</script>

<style lang="less" scoped>
.van-tabs{
}
</style>